


<template>
  <div class="white-module module addenroll">
    <div class="title"><span></span>赛事信息</div>

    <div class="info">
      <div class="item"><span>参与代表对队</span>{{iteaminfo.team_name}}</div>
      <div class="item"><span>领队</span>{{iteaminfo.real_name}}</div>
      <div class="item"><span>比赛时间</span>{{matchinfo.matchdate}}</div>

      <div class="item"><span>报名时间</span>{{matchinfo.signdate}}</div>
      <div class="item"><span>赛事名称</span>{{matchinfo.match_name}}</div>
      <div class="item"><span>赛事名称</span>{{matchiteminfo.item_name}}</div>
      <div class="item"><span>赛项类别</span>{{matchiteminfo.classname}}</div>
      <div class="item"><span>赛项类型</span>{{matchiteminfo.typename}}</div>

      <div class="item">
        <span><span>*</span>参赛组别</span>
        <!--
        <el-radio-group v-model="groupId">
          <el-radio :label="100301">小学组</el-radio>
          <el-radio :label="100302">初中组</el-radio>
          <el-radio :label="100303" v-if="matchiteminfo.item_name!='“蜂鸟行动”赛'">高中组</el-radio>
        </el-radio-group>
        -->
        <el-radio-group v-model="groupId">
          <el-radio v-for="item in dictGroups" :label="item.id">{{item.dictLabel}}</el-radio>
        </el-radio-group>
      </div>
      <div class="item">
        <span><span>*</span>队伍名称</span><el-input v-model="teamName" placeholder="请输入名称"></el-input>
      </div>
      <div class="item">
        <span><span>*</span>指导老师</span>
        <el-cascader style="width:241px"  v-model="teachers" :options="teacherList" :props="{ multiple: true }"
                     collapse-tags collapse-tags-tooltip :show-all-levels="false" @change="checkTeacher"/>
        <span style="color:red;text-align:left;font-size: 8px;margin-left: 10px">{{teacherMsg}}</span>
      </div>

    </div>
    <div class="title"><span></span>参赛队员</div>
    <div class="group">
      <div class="item" v-for="(item,index) in groups" :key="index">
        <span><span v-if="item.need==1">*</span>队员{{index+1}}</span>
        <el-select placeholder="选择队员" @change="selectUser" v-model="item.userId" clearable>
          <el-option
              v-for="itemO in studentList"
              v-show="itemO.selected!==1 || item.userId===itemO.id "
              :key="itemO.id"
              :label="itemO.real_name"
              :value="itemO.id">
          </el-option>
        </el-select>
        <!--国赛且开通了直通-->
        <block v-if="matchinfo.match_level== 1 && userInfo.team.isPass=='1'">
          <span style="margin-left: 10px;"><span style="color: #D9161C">*</span> 直通码</span>
          <el-input v-model="item.code" placeholder="请输入直通码" style="width: 241px; margin-left: 10px;"></el-input>
        </block>

      </div>

    </div>
    <div class="hint">
      注：赛前请关注 参赛报名 > 报名记录 > 对应赛事赛项的参赛时间信息；
      <div class="agreement"> <el-checkbox v-model="dataForm.checked2"/><span>*</span>点击同意并接受即表示您已阅读了解并同意<el-button type="text" @click="xieyiShow = true">《报名协议》</el-button></div>
    </div>
    <div class="btns">
      <el-button type="primary" @click="submit" v-if="iteaminfo.status==1">提交报名</el-button>
      <el-button @click="back">取消</el-button>
    </div>
  </div>

  <el-dialog title="报名协议" v-model="xieyiShow" width="700px">
    <div style="text-align: left; line-height: 35px;" class="student">
      一、参赛代表队：
      <br/>1.本代表队承诺本队及其所属人员自愿报名参加全国青少年无人机大赛。
      <br/>2.本代表队承诺填报的报名信息均真实有效。
      <br/>3.本代表队承诺在正式提交与参赛前，已检查核实所有填报信息和上传文件，确认符合申报要求和赛事及赛项规定，如因填写错误造成的后果由本队及本队相关人员自行承担。

      <br/>二、大赛组委会
      <br/>大赛组委会声明对收集的“全国青少年无人机大赛”的报名信息仅限于本大赛组织管理使用。
    </div>
    <div style="text-align: center" slot="footer" class="dialog-footer">
      <el-button @click="xieyiShow = false">我知道了</el-button>
    </div>
  </el-dialog>

</template>

<script lang="ts" >
import {defineComponent, onMounted, reactive, ref, toRefs} from "vue";
import baseService from "@/utils/baseService";
import listService from "@/utils/listService";
import router from "@/router";
import {IHttpResponse} from "@/utils/interface";
import {ElMessage} from "element-plus";
import {getCache} from "@/utils/cache";
export default defineComponent({
  setup() {


    const state = reactive({
      getDataListURL: "/front/fast/match/match/page?pageSize=10&name=小鸟飞飞",
      getDataListIsPage: true,
      deleteURL: "/pay/order",
      deleteIsBatch: true,
      dataForm: {
        orderId: "",
        status: "",
        name: "",
        checked2: false
      }
    });
    return { ...listService(state), ...toRefs(state) };
  },
  mounted(){
    this.userInfo = getCache('userInfo', { isSessionStorage: true }, {})
    this.queryTeacher();
    this.matchId = this.$route.query.matchId;
    this.matchItemId=this.$route.query.id ;
    const teamId =getCache("CacheToken",{ isSessionStorage: true }, {})["teamId"];
    this.queryTeamInfo(teamId);
    this.queryMatch(this.matchId);
    this.queryMatchItem(this.matchItemId);
  },

  data() {
    return {
      teacherMsg:"",
      iteaminfo:{
        real_name: "",
        team_name: ""
      },
      matchiteminfo:{
        student_num:3,
        student_num_max:5,
        teacher_num:1,
        teacher_num_max:3,
        classname: "",
        item_name: "",
        typename: "",
        base_match_item_id: ""
      },
      matchinfo:{
        begindate: "",
        signdate: "",
        match_name: "",
        match_level: null as any,
        stop_signup: null as any
      },
      teachers:[],
      matchItemId: null as any,
      matchId:null as any,
      teamName:'',
      groupId:0,
      numL:2,
      numR:3,
      groups:[{name:"1",need:1,userId:''}],
      checkList:['selected and disabled', 'Option A'],
      studentList:[],
      teacherList:[ {
        value: 'guide',
        label: 'Guide'}
      ],
      options:[],
      xieyiShow:false,
      dictGroups: [],
      userInfo: {
        team: {
          isPass: '0'
        }
      },
    };
  },

  methods: {
    back(){
      router.push("/enroll/matchEnroll?id="+this.matchId);
    },
    checkTeacher(){
      if(this.teachers.length<this.matchiteminfo.teacher_num ||this.teachers.length>this.matchiteminfo.teacher_num_max ){

        if(this.matchiteminfo.teacher_num==this.matchiteminfo.teacher_num_max){
          this.teacherMsg="请选择"+this.matchiteminfo.teacher_num+"位老师";
        }else{
          this.teacherMsg="请选择"+this.matchiteminfo.teacher_num+"~"+this.matchiteminfo.teacher_num_max+"位老师";
        }
      }else{
        this.teacherMsg="";
      }
    },
    //选中选手时，要过滤掉，不让其它选手选
    selectUser(){
      this.studentList.forEach((e:any)=>{
        e.selected=2;
        this.groups.forEach((e2:any)=>{
          if(e2.userId ==e.id ){
            e.selected=1;
          }
        })
      });
    },
    queryUser(season:string, matchId:string){
      baseService.get("/front/fast/user/userList/list?pageSize=10&type=4&season="+season+"&noItemId="+this.matchItemId+"&matchId=" + matchId).then(e=>{
        this.studentList =  e.data;
      });
    },
    //初始化，队员长度
    initGroupLeng(){
      this.groups=[];
      for(let i =0 ;i<this.matchiteminfo.student_num_max;i++){

        if(i<this.matchiteminfo.student_num){
          this.groups.push({ name: '1',need:1,userId:'' });
        }else{
          //非必填
          this.groups.push({ name: '1',need:0 ,userId:''});
        }
      }
    },

    queryTeacher: function () {
      baseService.get("/front/fast/user/userList/list?pageSize=10&type=3").then(e => {
        this.teacherList = [];
        interface SpUser{id:string,real_name:string};
        e.data.forEach((e2:SpUser) => {
          this.teacherList.push( {
            value: e2.id,
            label: e2.real_name});
        });


      });
    },
    submit() {
      const users: any = [];
      //校验不通过则返回
      if (!this.checkSubmit()) {
        return;
      }
      this.groups.forEach((e: any) => {
        if (e.userId) {
          users.push({userId: e.userId, code:e.code});
        }
      })
      let isPass = (this.matchinfo.match_level == 1 && this.userInfo.team.isPass == '1') ? '1' : '0';
      const dataForm = {
        groupId: this.groupId,
        teamName: this.teamName,
        users,
        matchItemId: this.matchItemId,
        teachers: this.teachers.join(","),
        isPass
      };
      baseService.post("/front/spmatchItemTeam/save", dataForm).then((res: any) => {
        if (res.code == 0) {
          ElMessage.success('报名成功');
          router.push("/enroll/matchEnroll?id=" + this.matchId);
        } else {
          ElMessage.error(res.msg);
        }
      })
    },

    checkSubmit(){
      if(this.matchinfo.stop_signup == '1'){
        ElMessage.error("报名时间已截止！");
        return false;
      }
      if(!this.teamName){
        ElMessage.error("请填写队伍名称！");
        return false
      }else if(this.teamName.length>30){
        ElMessage.error("队伍名称不能超过30个字！");
        return false;
      }
      if(!this.groupId){
        ElMessage.error("请选择参赛组别！");
        return false
      }
      if(this.teachers.length ==0){
        ElMessage.error("请选择指导老师！");
        return false
      }
      if(this.teachers.length > this.matchiteminfo.teacher_num_max){
        ElMessage.error("指导老师最多为"+this.matchiteminfo.teacher_num_max+"位！");
        return false
      }
      if(this.teachers.length < this.matchiteminfo.teacher_num){
        ElMessage.error("指导老师少为"+this.matchiteminfo.teacher_num+"位！");
        return false
      }
      for(let i =0 ;i<this.matchiteminfo.student_num ;i++){
          if(!this.groups[i].userId){
            ElMessage.error("请选择队员"+(i+1)+"！");
            return false;
          }

      }
      if (!this.dataForm.checked2) {
        ElMessage.error("您未同意用户协议，请先同意！");
        return false
      }
      return true;
    },addNum(){
      this.groups.push({name:"1",need:0,userId: ''});
    },deleteNum(index:number){
      this.groups = this.groups.filter((e,i)=>i!=index)  ;
    }
    ,
    //查询赛项信息
    queryMatchItem(id:string){
      baseService.get("/front/fast/match/matchItem/info?id="+id).then((e:any)=>{
        if(e.code=='0'){
          this.matchiteminfo = e.data;
          //初始化长度
          this.initGroupLeng();
          if(this.matchiteminfo){
            this.queryGroup(this.matchiteminfo.base_match_item_id);
          }
        }
      });
    },
    //查询赛项信息
    queryTeamInfo(id:string){
      baseService.get("/front/fast/user/team/info?id="+id).then((e:any)=>{
        if(e.code=='0'){
          this.iteaminfo = e.data;
        }
      });
    },
    //查询赛项信息
    queryMatch(id:string){
      baseService.get("/front/fast/match/match/info?id="+id).then((e:any)=>{
        if(e.code=='0'){
          this.matchinfo = e.data;
          this.queryUser(e.data.season, id);

        }
      });
    },
    //查询参赛组别
    queryGroup(id:string){
      baseService.get("/front/spbasematchitemgoupref/queryGroup?id="+id).then((e:any)=>{
        if(e.code=='0'){
          this.dictGroups = e.data;
        }
      });
    }
  }
});
</script>

<style lang="scss" scoped>
.module {
  padding: 20px 0px;
  margin-bottom: 12px;
  position: relative;

  .title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: $font-weight-bold;
    padding: 0px 24px;

    span {
      width: 4px;
      height: 12px;
      background: #00a0e9;
      margin-right: 7px;
    }
  }

  .info {
    margin-bottom: 40px;

    .item {
      display: flex;
      align-items: center;
      margin-top: 14px;
      font-family: PingFangSC-Regular, PingFang SC;

      >span {
        width: 136px;
        text-align: right;

        font-weight: $font-weight-bold;
        margin-right: 20px;
        font-family: PingFangSC-Medium, PingFang SC;

        span {
          color: #D9161C;
        }
      }

      .el-input {
        width: 220px;
      }
      .el-select{
        width: 220px;
      }
    }
  }

  .group {
    margin-left: 73px;
    margin-top: 16px;

    .item {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      height: 33px;

      >span {
        margin-right: 16px;

        span {
          color: #D9161C;
        }
      }

      .el-select {
        width: 241px;
        margin-right: 44px;
      }


    }
  }

  .hint {
    text-align: center;
    margin: 50px 0px 20px;

    color: #959CA9;
    font-size: 12px;
  }

  .btns {
    display: flex;
    justify-content: center;
    padding-bottom: 5px;
    .el-button{
      width: 108px;
      height: 38px;
    }
  }
}</style>

<style lang="scss">
.addenroll{
  .group{
    .el-cascader__tags .el-tag{
      background: #fff;
    }



  }
  .info{
    .el-radio__inner{
      border-color:#a8abb2;
    }
  }
  .el-checkbox__inner{

    border-color:#a8abb2;
  }
}
</style>
